<template>
	<view :style="shadowStyle" :elevation="shadow && (!transparent || (transparent && scrollTop > 0)) ? 3 : 0">
		<view class="yb-nav-bar yb-flex"
		:style="rootStyle"
		:class="customClassSync"
		:id="customIdSync"
		@touchmove.stop.prevent>
			<view class="yb-nav-bar-bg" :style="bgStyle">
				<image v-if="optionsSync.bgImage" class="bg" :src="optionsSync.bgImage" mode="aspectFill"></image>
			</view>
			<view class="yb-nav-bar-status-bar" :style="{'height': barHeight + 'px', 'background-color': optionsSync.statusBarColor}" v-if="enableStatusbar"></view>
			<view class="yb-nav-bar-nav yb-flex">
				<slot>
					<view class="yb-nav-bar-title yb-flex yb-align-center yb-justify-center" :style="{
						opacity: (transparent && transparentTitle) ? (scrollTop / 100) > 1 ? 1 : (scrollTop / 100) : 1
					}" v-if="title && !inputSync.show">
						<yb-text :lines="1" align="center" :color="optionsSync.color" :size="optionsSync.size" :value="title"></yb-text>
					</view>
					<view class="yb-flex yb-flex-1 yb-row yb-align-center yb-justify-between" :style="{
						'margin-right': mpGap + 'px'
					}">
						<view class="yb-flex"
						:class="{
							'yb-flex-1': inputSync.show && inputSync.float == icon
						}"
						v-for="(icon, i) in icons" :key="i" >
							<template v-if="inputSync.show && inputSync.float == icon">
								<view @tap="onInputClick" class="yb-nav-bar-input yb-flex yb-row yb-align-center" :style="{
									'background-color': inputSync.bgColor,
									'margin-left': icon == 'left' ? 0 : buttonsSync.filter(btn => btn.float == 'left').length > 0 ? '20rpx' : 0,
									'margin-right': icon == 'right' ? 0 : buttonsSync.filter(btn => btn.float == 'right').length > 0 ? '20rpx' : 0
								}">
									<yb-icon v-if="inputSync.icon" custom-style="margin-right: 20rpx;" :name="inputSync.icon" size="24rpx" :color="inputSync.color"></yb-icon>
									<yb-text :value="inputSync.placeholder" :color="inputSync.color"></yb-text>
								</view>
							</template>
							<template v-else>
								<view class="yb-flex yb-row yb-align-center" :style="iconStyle">
									<block v-for="(item, index) in buttonsSync.filter(btn => btn.float == icon)" :key="index">
										<yb-tap
										:borderTopLeftRadius="shape == 'capsule' && index == 0 ? '66rpx' : 0"
										:borderBottomLeftRadius="shape == 'capsule' && index == 0 ? '66rpx' : 0"
										:borderTopRightRadius="shape == 'capsule' && index == buttonsSync.filter(btn => btn.float == icon).length - 1 ? '66rpx' : 0"
										:borderBottomRightRadius="shape == 'capsule' && index == buttonsSync.filter(btn => btn.float == icon).length - 1 ? '66rpx' : 0"
										:borderRadius="shape == 'circle' ? '66rpx' : 0"
										active="mask"
										custom-class="yb-row yb-align-center yb-justify-center"
										:custom-style="{
											'position': 'relative',
											'padding-left': shape ? '20rpx' : '',
											'padding-right': shape ? '20rpx' : '',
											'width': shape != 'capsule' ? '66rpx' : '',
											'height': shape != 'capsule' ? '66rpx' : mpHeight,
											'background-color': shape == 'circle' ? optionsSync.style == 'white' ? 'rgba(255,255,255,.6)' : 'rgba(0,0,0,.6)' : '',
											'margin-right': shape == 'circle' && index < buttonsSync.filter(btn => btn.float == icon).length - 1 ? '10rpx' : 0
										}"
										@click="onIconTap(item)">
											<slot :name="item.value">
												<yb-icon v-if="item.icon" :custom-style="{
													'min-width': shape == 'capsule' ? '66rpx' : '',
													'text-align': 'center'
												}" :name="item.icon" :size="item.size" :color="iconColor"></yb-icon>
											</slot>
										</yb-tap>
										<view
										class="yb-nav-bar-right-border"
										v-if="index < buttonsSync.filter(btn => btn.float == icon).length - 1 && shape == 'capsule'"
										:style="{
											'background-color': optionsSync.style == 'white' ? 'rgba(0,0,0,.3)' : 'rgba(255,255,255,.3)'
										}"></view>
									</block>
								</view>
							</template>
						</view>
					</view>
				</slot>
			</view>
		</view>
		<template v-if="fixed">
			<view :style="{'height': barHeight + 'px', 'background-color': optionsSync.statusBarColor}" v-if="enableStatusbar"></view>
			<view style="height: 100rpx;"></view>
		</template>
	</view>
</template>

<script>
	import Util from '../../js_sdk/util.js'
	import ComponentMixin from '../../js_sdk/componentMixin.js'
	export default {
		mixins: [ComponentMixin],
		props: {
			tabbar: {
				type: Boolean,
				default: false
			},
			back: {
				type: Boolean,
				default: true
			},
			input: {
				type: [Boolean, Object, String],
				default: ''
			},
			transparent: {
				type: Boolean,
				default: false
			},
			//设置透明时，是否将标题一起设为透明
			transparentTitle: {
				type: Boolean,
				default: false
			},
			scrollTop: {
				type: Number,
				default: 0
			},
			home: {
				type: String,
				default: ''
			},
			title: {
				type: String,
				default: ''
			},
			enableStatusbar: {
				type: Boolean,
				default: true
			},
			buttons: {
				type: Array,
				default () {
					return new Array
				}
			},
			shape: {
				type: String,
				default: ''
			},
			fixed: {
				type: Boolean,
				default: false
			},
			shadow: {
				type: Boolean,
				default: false
			},
			options: {
				type: Object,
				default () {
					return new Object
				}
			}
		},
		computed: {
			optionsSync () {
				return Object.assign({}, {
					size: '32rpx',
					color: '#FFFFFF',
					bgColor: '#2196F5',
					statusBarColor: '',
					bgGradient: '',
					bgImage: '',
					style: 'white'//按钮风格 white/black
				}, this.options)
			},
			buttonsSync () {
				let arr = []
				if ( this.back && !this.tabbar && this.buttons.findIndex(icon => icon.value == 'back') == -1 ) {
					arr.push(this.getIcon({
						icon: 'angle-arrow-left',
						value: 'back',
						size: '32rpx',
						float: 'left'
					}))
				}
				if ( this.home && this.buttons.findIndex(icon => icon.value == 'home') == -1 ) {
					arr.push(this.getIcon({
						icon: 'home',
						value: 'home',
						float: 'left'
					}))
				}
				return arr.concat(this.buttons.map(icon => {
					// #ifdef MP
					return this.getIcon(Object.assign({}, {
						float: 'left'
					}, icon))
					// #endif
					// #ifndef MP
					return this.getIcon(icon)
					// #endif
				}))
			},
			inputSync () {
				return Object.assign({}, {
					show: false,
					icon: '',
					placeholder: '点击输入内容',
					color: '#999',
					bgColor: '#eee',
					float: 'center'
				}, Util.typeof(this.input) == 'Object' ? this.input : Util.typeof(this.input) == 'Boolean' ? { show: this.input } : Util.typeof(this.input) == 'String' ? { icon: this.input } : {})
			},
			bgStyle () {
				return this.filterStyle(
					Object.assign({}, {
						opacity: this.transparent ? (this.scrollTop / 100) > 1 ? 1 : (this.scrollTop / 100) : 1
					}, this.optionsSync.bgGradient ? {
						'background-image': `linear-gradient(${this.optionsSync.bgGradient})`
					} : {
						'background-color': this.optionsSync.bgColor
					})
				) 
			},
			rootStyle () {
				let obj = this.fixed ? {
					position: 'fixed',
					top: 0,
					left: 0,
					right: 0
				} : {
					position: 'relative'
				}
				return this.filterStyle(obj) + this.customStyleSync
			},
			shadowStyle () {
				let platform = uni.getSystemInfoSync().platform
				return this.filterStyle(
					Object.assign({}, {
						position: 'relative',
						// #ifndef APP-NVUE
						'z-index': 1,
						// #endif
					}, platform == 'android' ? {
						// #ifndef APP-NVUE
						'box-shadow': this.shadow && (!this.transparent || (this.transparent && this.scrollTop > 0)) ? '5rpx 0 10rpx rgba(0,0,0,.3)' : ''
						// #endif
					} : {
						'box-shadow': this.shadow && (!this.transparent || (this.transparent && this.scrollTop > 0)) ? '5rpx 0 10rpx rgba(0,0,0,.3)' : ''
					})
				)
			},
			iconStyle () {
				return this.filterStyle(
					Object.assign({}, {
						'border-radius': this.shape == 'capsule' ? '66rpx' : 0
					}, this.shape == 'capsule' ? {
						'background-color': this.optionsSync.style == 'white' ? 'rgba(255,255,255,.8)' : 'rgba(0,0,0,.8)',
					} : {} )
				) 
			},
			iconColor () {
				return (this.shape == 'capsule' || this.shape == 'circle') ? this.optionsSync.style == 'white' ? '#191919' : '#FAFAFA' : this.optionsSync.color
			}
		},
		data () {
			return {
				icons: ['left', 'center', 'right'],
				mpGap: 0,//小程序胶囊按钮占位宽度
				mpHeight: '66rpx',
				barHeight: 0
			}
		},
		created() {
			uni.getSystemInfo({
				success: (res) => {
					// #ifndef H5
					this.barHeight = res.safeArea.top
					// #endif
					// #ifdef H5
					this.barHeight = res.windowTop
					// #endif
				}
			})
		},
		mounted() {
			// #ifdef MP
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			this.mpGap = menuButtonInfo.width + uni.upx2px(20)
			this.mpHeight = menuButtonInfo.height + 'px'
			// #endif
		},
		methods: {
			getIcon (icon) {
				return Object.assign({}, {
					label: '',
					icon: '',
					value: '',
					size: '40rpx',
					float: 'right'
				}, icon)
			},
			onIconTap (e) {
				if ( e.value == 'back' ) {
					uni.navigateBack({
						delta: 1
					})
				} else if ( e.value == 'home' ) {
					uni.reLaunch({
						url: this.home,
						fail: () => {
							uni.switchTab({
								url: this.home
							})
						}
					})
				} else {
					this.$emit('buttonClick', e)
				}
			},
			onInputClick () {
				this.$emit('inputClick', this.inputSync)
			}
		}
	}
</script>

<style scoped>
	.yb-nav-bar {
		/* #ifndef APP-NVUE */
		width: 100%;
		/* #endif */
	}
	.yb-nav-bar-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		/* #ifndef APP-NVUE */
		width: auto;
		height: auto;
		/* #endif */
	}
	.yb-nav-bar-status-bar {
		position: relative;
		/* #ifndef APP-NVUE */
		z-index: 2;
		/* #endif */
	}
	.yb-nav-bar-nav {
		height: 100rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		position: relative;
	}
	.yb-nav-bar-title {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	.yb-nav-bar-right-border {
		height: 35rpx;
		width: 1px;
	}
	.yb-nav-bar-input {
		height: 66rpx;
		border-radius: 66rpx;
		background-color: #eee;
		padding: 0 30rpx;
	}
</style>
